<!DOCTYPE html>
<html>
<head>
    <title>回答页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <link href="/css/question/mobile+css+head_mobile+css+ui%5Eyvw%5E1526627473.css"
          rel="stylesheet" type="text/css">
    <link href="/css/question/new_ask2016.css" rel="stylesheet" type="text/css">
    <script>
        $(function () {
            var params = getParams();
            if (params.id) {
                $.get("/questions/" + params.id, function (data) {
                    $(".comment").renderValues(data, {
                        getHref: function (item, value) {
                            var href = $(item).data("href");
                            $(item).attr("href", href + value);
                        }
                    });
                    $(".answerBtn").attr("href", "/mine/reply.html?id=" + params.id);
                });

                var currentPage = 1;//当前页
                var pages;//总页数
                var anwserData = [];//定义一个数组用来接收每次分页时的数据
                function query() {//记得传递当前页这个参数
                    $.get("/questions/" + params.id + "/answers", {currentPge: currentPage}, function (data) {
                        $.merge(anwserData, data.list);
                        var json = {
                            list: anwserData
                        };
                        $("#allAnswer").renderValues(json, {
                            getHref: function (item, value) {
                                var href = $(item).data("href");
                                $(item).attr("href", href + value);
                            }
                        });
                        pages = data.pages;
                    });
                    currentPage++;
                }

                //默认查询第一页
                query();
                //点击查看更多时查询第二页
                $("#moreAnswer").click(function () {
                    if (currentPage <= pages) {//如果当前页数小于等于总页数
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">没有更多回答了!</span>',
                            autoClose: 1000,
                            position: 'bottom'
                        });
                    }
                });
            }

            //回复
            $(".answerBtn").click(function () {
                var dynamicId = $(this).data("id"); //取出当前会的动态的id
                //如果是回复评论 占位符中显示被回复的人的nickName
                var html = "<label>内容：<input class='confirm_input' placeholder=''></label>";
                popTipShow.confirm('回复', html, ['回 复', '取 消'],
                    function (e) {
                        //callback 处理按钮事件
                        var button = $(e.target).attr('class');
                        if (button == 'ok') {
                            if (null == $(".confirm_input").val() || "" == $(".confirm_input").val()) {
                                webToast("评论不能为空！", "bottom", 3000);
                                return;
                            }
                            this.hide();
                            //按下确定按钮执行的操作
                            var content = $(".confirm_input").val(); //取出内容
                            var dynamicComment = {//评论对象
                                content: content

                            };
                            $.post("/dynamics/" + dynamicId + "/dynamicComments/-1", dynamicComment, function (data) {
                            });
                        }
                        if (button == 'cancel') {//取消
                            this.hide();
                        }
                    }
                );
            });

            });
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col" id="back">
            <a href="/question.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>问题回答页面</span>
        </div>
        <div id="collect" class="col" style="text-align: right"></div>
    </div>
</div>
<div class="comment">
    <div class="container">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="/userProfiles.html?id=" render-key="user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <span class="comment-star" render-html="user.nickName"></span>
                <div class="p-2">
                    <span class="comment-star">提问地点</span>
                    <span class="comment-date" render-html="placeName"></span>
                </div>
                <div class="p-2">
                    <span class="comment-star">提问地点时间</span>
                    <span class="comment-date" render-html="creationTime"></span>
                </div>
                <div class="comment-content">
                    <h5 render-html="title"></h5>
                    <img render-src="questionImg" style="width:80%">
                    <p render-html="content"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="count d-flex justify-content-between">
        <div class="p-2"><span render-html="answerNumber"></span></div>
    </div>
</div>
<hr/>
<div class="container">
    <h6>全部回答</h6>
    <div id="allAnswer">
        <div render-loop="list">
            <div class="row">
                <div class="col">
                    <p>
                        <a data-href="userProfiles.html?id=">
                            <img class="rounded-circle head-img" render-src="list.user.headImgUrl" width="20px">
                            <span render-html="list.user.nickName"></span>
                        </a>
                    </p>
                    <p>
                        <span render-html="list.replyContent"></span>
                        <span render-html="list.creatTime"></span>
                    </p>
                    <p>
                        <i class="fa fa-commenting fa-fw"></i>
                        <span render-html="list.commentNumber"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <section class="ans-list a-list">
        <div style="margin-bottom: 65px;" id="moreAnswer">
            <a class="more-list _j_add_more_button">更多回答</a>
        </div>
    </section>
    <section class="askfoot">
        <a class="btn-que answerBtn" data-cs-p="show_publish"><i></i>
            我要回答
        </a>
    </section>
</div>
</body>
</html>